<template>
  <div class="container">
    <h1 class="tip">确认挂号信息</h1>
    <!-- 卡片:展示就诊人信息 -->
    <el-card class="box-card">
      <!-- 卡片的头部 -->
      <template #header>
        <div class="card-header">
          <span>请选择就诊人</span>
          <el-button type="primary" size="default" icon="User" @click="changeScene">添加就诊人</el-button>
        </div>
      </template>
      <!-- 卡片的身体部分展示就诊人信息 -->
      <div class="user">
        <!--        <visitor-->
        <!--            @click="changeIndex(index)"-->
        <!--            v-for="(user, index) in userArr"-->
        <!--            :key="user.id"-->
        <!--            class="item"-->
        <!--            :user="user"-->
        <!--            :index="index"-->
        <!--            :currentIndex="currentIndex"-->
        <!--        />-->
        <visitor
            @convey-value-index="conveyValueIndex"
        />
      </div>
    </el-card>
    <!-- 卡片:展示医生的信息 -->
    <el-card class="box-card">
      <!-- 卡片的头部 -->
      <template #header>
        <div class="card-header">
          <span>挂号信息</span>
        </div>
      </template>
      <!-- 卡片身体部分:展示医生的信息 -->
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊日期:</div>
          </template>
          {{ docInfo.workDate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊医院:</div>
          </template>
          {{ docInfo.param?.hosname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊科室:</div>
          </template>
          {{ docInfo.param?.depname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生姓名:</div>
          </template>
          {{ docInfo.docname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生职称:</div>
          </template>
          {{ docInfo.title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生专长:</div>
          </template>
          {{ docInfo.skill }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生服务器:</div>
          </template>
          <span style="color: red">{{ docInfo.amount }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <!-- 确定挂号按钮 -->
    <div class="btn">
      <el-button
          type="primary"
          size="default"
          :disabled="userIndex == -1 ? true : false"
          @click="submitOrder"
      >确认挂号
      </el-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import Visitor from "@/components/visitor/visitor.vue";

import useHospitalInfoStore from "@/store/hospital_info";
import {useRoute} from "vue-router";
import {storeToRefs} from "pinia";
import router from "@/router";
import {ref} from "vue";
import {getOrderNo} from "@/api/hospital_info";

const route = useRoute();
const hosScheduleId = route.query.hosScheduleId

const infoStore = useHospitalInfoStore();
infoStore.getHospitalSchedulePersonData(hosScheduleId as string)
const {docInfo} = storeToRefs(infoStore)

const userIndex = ref(-1)
const conveyValueIndex = (index: number) => {
  userIndex.value = index
}

//确认挂号跳转页面到user页面
const submitOrder = async () => {
  const docterId = infoStore.docInfo.id
  const hoscode = infoStore.docInfo.hoscode
  //查找用户id
  const user = infoStore.users[userIndex.value];
  await infoStore.getOrderNoData(hoscode, docterId, user.id)
  //获取订单id跳转页面
  router.push({
    path: "/user/order",
    query: {
      orderId: infoStore.orderId
    }
  })
}


//切换场景
const changeScene = () => {
  router.push({
    path: "/user/patient",
    query: {
      scene: 1
    }
  })
}


</script>

<style scoped lang="less">
.container {
  .tip {
    font-weight: 900;
    color: #7f7f7f;
    font-size: 20px;
  }

  .box-card {
    margin: 20px 0px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .user {
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 32%;
        margin: 5px;
      }
    }
  }

  .btn {
    display: flex;
    justify-content: center;
    margin: 10px 0px;
  }
}
</style>
